/* 导入tab样式 */
@import './tab-styles.css';

/* 覆盖 Tailwind 的通用边框重置 - 必须在最前面 */
.no-border,
.no-border *,
.no-border:before,
.no-border:after {
  border: 0 !important;
  border-style: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
}

.container.relative.mx-auto > .flex.flex-col,
.container.relative.mx-auto > .flex.flex-col *,
.container.relative.mx-auto > .flex.flex-col:before,
.container.relative.mx-auto > .flex.flex-col:after {
  border: 0 !important;
  border-style: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
}

/* 全局body背景色 - 确保大屏幕下两侧统一背景 */
body {
  background-color: #f4f5f7 !important;
}

/* 暗色主题下的全局body背景色 */
.dark body {
  background-color: hsl(var(--background)) !important;
}

/* 首页专用背景色 */
.homepage-background {
  background-color: #f4f5f7 !important;
}

/* 暗色主题下保持原有背景 */
.dark .homepage-background {
  background-color: hsl(var(--background)) !important;
}

/* 首页SiteHeader组件背景色 */
.homepage-background .site-header-bg {
  background-color: #f4f5f7 !important;
}

/* 首页BottomNavigation组件背景色 */
.homepage-background .bottom-nav-bg {
  background: linear-gradient(to bottom, #f4f5f7, #f4f5f7) !important;
}

/* 暗色主题下的SiteHeader背景色 */
.dark .homepage-background .site-header-bg {
  background-color: hsl(var(--background)) !important;
}

/* 暗色主题下的BottomNavigation背景色 */
.dark .homepage-background .bottom-nav-bg {
  background: linear-gradient(to bottom, hsl(var(--background)), hsl(var(--muted))/0.2) !important;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 84% 4.9%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 84% 4.9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.75rem;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 84% 4.9%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 94.0%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  
  /* 移除原有的body背景设置，使用上面的直接CSS规则 */
}

/* 覆盖 Tailwind 的默认边框样式 - 必须在 @layer base 之外 */
.container > .flex.flex-col,
.container > .flex.flex-col *,
.container > .flex.flex-col:before,
.container > .flex.flex-col:after {
  border: 0 !important;
  border-style: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
}

/* 确保所有容器边框重置 */
.container.relative.mx-auto,
.container.relative.mx-auto *,
.container.relative.mx-auto:before,
.container.relative.mx-auto:after {
  border: 0 !important;
  border-style: none !important;
  border-width: 0 !important;
  border-color: transparent !important;
}

/* 暗色主题下的"我的待办"和"小游戏"按钮样式适配 */
.dark .box-list {
  background: hsl(var(--card)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 22.5px !important; /* 保持与亮色主题相同的圆角效果 */
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important; /* 简化阴影效果 */
}

.dark .box-list-link {
  background: hsl(var(--card)) !important;
  color: hsl(var(--foreground)) !important;
}

.dark .box-list-link:hover {
  background: hsl(var(--accent)) !important;
  color: hsl(var(--accent-foreground)) !important;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

.dark::view-transition-old(root) {
  z-index: 1;
}
.dark::view-transition-new(root) {
  z-index: 999;
}

::view-transition-old(root) {
  z-index: 999;
}
::view-transition-new(root) {
  z-index: 1;
}

/* 原版"我的待办"和"小游戏"按钮样式 */
@layer components {
  .attachment-container {
    width: 240px;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-right: auto;
    margin-left: auto;
  }

  .attachment-box {
    display: flex;
    justify-content: center;
    gap: 20px;
  }

  .box-list {
    width: fit-content;
    margin: 0 10px 20px;
    overflow: hidden;
    border-radius: 22.5px;
    box-shadow: 0 0 25px #4e464629;
    -webkit-box-shadow: 0 0 25px #4e464629;
    -moz-box-shadow: 0 0 25px #4e464629;
    border: 6px solid #fff;
    transition: width;
  }

  .box-list-link {
    display: inline-block;
    height: 50px;
    line-height: 50px;
    text-align: center;
    width: auto;
    padding: 0 20px;
    min-width: 140px;
    white-space: nowrap;
    margin-top: -1px;
    background: #fff;
    color: #02a3ff;
    font-size: 17px;
    transition: 0.3s, font-size 0s, height 0s, line-height 0s;
    text-decoration: none;
  }

  /* 窄屏优化：减小左右内边距与最小宽度，保证并排显示 */
  @media (max-width: 420px) {
    .box-list-link {
      min-width: 120px;
      padding: 0 14px;
    }
  }

  .box-list-link:hover {
    background: #f8f8f8;
    color: #1E9FFF;
  }

  .box-list-link:active {
    background: #f8f8f8;
    color: #1E9FFF;
  }

  /* 暗色主题下的按钮样式适配 */
  .dark .box-list {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 22.5px; /* 保持与亮色主题相同的圆角效果 */
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); /* 简化阴影 */
    -webkit-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    -moz-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  }

  .dark .box-list-link {
    background: hsl(var(--card));
    color: hsl(var(--foreground));
    border: none;
  }

  .dark .box-list-link:hover {
    background: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
  }

  .dark .box-list-link:active {
    background: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
  }
}

/* SEO优化相关样式 - 隐藏显示但保留SEO效果 */
.seo-main-header {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* SEO标题和描述 - 隐藏但保留在HTML中供搜索引擎读取 */
.seo-main-title {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.seo-main-description {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* 分类SEO描述样式 - 隐藏显示但保留SEO效果 */
.category-seo-description {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* 分类标题和描述 - 隐藏但保留在HTML中供搜索引擎读取 */
.category-title {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.category-description {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

/* 响应式设计样式已不需要，因为内容已隐藏 */

/* 动画和暗色主题样式已不需要，因为内容已隐藏 */
